import React,{Component} from 'react';
import PropTypes from 'prop-types';

import {NavLink} from 'react-router-dom';


import './AnswerScore.less';

import Popup from '../common/popup/Popup';

class AnswerScore extends Component {

    state = {
        answerCount:null,
        shareShow:false
    };

    static contextTypes = {
        setNavConfig: PropTypes.func
    };

    constructor(props,context){
        super(props,context);


        this.shareClickHandle = this.shareClickHandle.bind(this);
        this.sharBgClickHandle = this.sharBgClickHandle.bind(this);

        this.getAnswerCount();


        context.setNavConfig(this.navConfig);

        
    }



   



    get navConfig(){
        return {
            center:"布拉题库"
        };
    }




    getAnswerCount(){
        window.$.get("http://result.eolinker.com/PMR6Shb6b68e3043d93f7ca7ddf92fd26b5024ee06fdfb7?uri=https://api.blatrip.com/v2/island-answer/remain",null,(data,textStatus)=>{
            
        if (data.error_code == 0){
            let ansCount = data.data.count;
            this.setState({answerCount:ansCount});
        }
        
        },"json");
    }

    shareClickHandle(){
        this.setState({shareShow:true});
    }

    sharBgClickHandle(){
        this.setState({shareShow:false});
    }


    render(){

        let shareInstrStyle = {display: this.state.shareShow ? "block" : "none"};

        return (
            <div className="answer-score">

                <div className="info-area">

                    <div className="score-area">
                        <p className="score-title">得分</p>
                        <div className="score-info">
                            <p className="score-number">80</p>
                            <p className="score-describe">
                                <span className="title-count">你总共答对了<span className="title-number">{8}</span>道题</span>
                                <span className="time-count">用时<span className="time-number">{2}</span>分<span className="time-number" >{34}</span>秒</span>
                            </p>

                        </div>
                    </div>


                    <div className="award-area">
                    <p className="title-area">
                    <span className="award-words">恭喜您获得</span>
                    <span className="use-action">立即使用>></span>
                    </p>


                    <ul className="coupon-area">
                    <li className="coupon">
                    <p className="coupon-desc">￥ <span className="coupon-price">8.8</span> 优惠券</p>
                    <p className="use-desc"> <span className="use-left">——</span> <span className="use-center">满200元可用</span> <span className="use-right">——</span></p>
                    </li>

                    </ul>

                    
                    </div>



                </div>


                <div className="action-area">
                    <NavLink to="/questions" className="answer-action">再答一次(剩余{this.state.answerCount}次)</NavLink>
                    <p className="action-dect">分享可获得更多答题机会</p>
                    <p className="share-action" onClick={this.shareClickHandle} >分享增加机会</p>

                </div>


                <div className="share-instr-area" style={shareInstrStyle} onClick={this.sharBgClickHandle}>
                    <div className="share-instr">夫婿</div>
                </div>


            </div>
        );
    }
}

export default AnswerScore;